<template>
    <popup
        ref="popupRef"
        width="32%"
        title='物料编辑'
        class="bg-page"
        :showClose="false"
        :showFooter="false"
    >
        
        <el-form ref="formRef" :model="formData" class="mb-12" label-width="150px">
            <el-form-item label="售后物料名称" prop="itemName">
                <el-input
                    disabled
                    class="w-80"
                    v-model="formData.itemName"
                />
            </el-form-item>
            
            
            <el-form-item label="售后物料编码" prop="itemCode">
                <el-input
                    disabled
                    class="w-80"
                    v-model="formData.itemCode"
                />
            </el-form-item>
            
            
            <el-form-item label="售后69码" prop="batch">
                <el-autocomplete
                    class="w-80"
                    v-model="formData.batch"
                    :fetch-suggestions="autocompleteQueryLineManager.querySearchAsync"
                    placeholder="请输入售后69码"
                    @select="autocompleteQueryLineManager.handleSelect(formData)"
                    value-key="batch"
                />
            </el-form-item>
            
            
            <el-form-item label="售后SN" prop="sn">
                <el-input
                    class="w-80"
                    v-model="formData.sn"
                />
            </el-form-item>
        
        
        </el-form>
        
        <div class=" flex justify-end pr-16">
            <el-button @click="handleClose">
                取消
            </el-button>
            
            <el-button @click="handleConfirm" type="primary">
                确定
            </el-button>
        </div>
    </popup>


</template>

<script lang='ts' setup>


import Popup from "@/components/popup/index.vue";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {FormInstance} from "element-plus";
import CooperateOrderLineDTO from "@/api/afterSale/cooperate/dto/CooperateOrderLineDTO";
import {useAutocompleteQueryLineManager} from "@/manager/base/AutocompleteQueryManager";
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";

let afterSaleOrderConfig = useAfterSaleEnumManager();
let autocompleteQueryLineManager = useAutocompleteQueryLineManager(afterSaleOrderConfig);

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formRef = shallowRef<FormInstance>()


// 定义物料数据
const formData:UnwrapNestedRefs<CooperateOrderLineDTO> = reactive(new CooperateOrderLineDTO())


/**
 * 弹窗打开 传入当前物料信息
 */
function open(item: CooperateOrderLineDTO) {
    for (let key in item) {
        //@ts-ignore
        formData[key] = item[key]
    }
    
    popupRef.value?.open()
}


/**
 *     确认提交
 *
 * @author 徐寿春
 * 2023/4/8 u
 */
async function handleConfirm() {
    popupRef.value.close()
    emit('confirm', formData)
    
}


/**
 *  弹窗关闭
 *
 * @author 徐寿春
 * 2023/4/8 13:28
 */
function handleClose() {
    popupRef.value.close()
    emit('close', formData)
    
}


/**
 * 自动匹配搜索  做整体缓存
 */


const emit = defineEmits(['confirm', 'close'])
defineExpose({
    open
})


</script>

